<template>
    <div class="home">
        <div class="home-main">
            <div class="home-main-top">
                <div class="new-sign">
                    <div class="new-sign-title">
                        <h3>
                            <i class="el-icon-picture"></i>
                            新建签署
                        </h3>
                    </div>
                    <div class="new-sign-main">
                        <el-button class="upload-btn" plain @click="upLoad">
                            <i class="el-icon-upload2"></i>
                            上传文件
                        </el-button>
                        <span>支持扩展名：doc .docx .pdf .jpg .png格式</span>
                    </div>
                </div>
                <div class="new-sign-right">
                    <div class="wait-sign">
                        <div class="wait-sign-title">
                            <h3>
                                <i class="el-icon-picture"></i>
                                待处理合同
                            </h3>
                        </div>
                        <div class="wait-sign-main">
                            <div class="sign-num">
                                0份
                            </div>
                        </div>
                    </div>
                    <div class="already-sign">
                        <div class="already-sign-title">
                            <h3>
                                <i class="el-icon-picture"></i>
                                客户已签署合同
                            </h3>
                        </div>
                        <div class="already-sign-main">
                            <div class="sign-num">
                                0份
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="home-main-bottom">
                <div class="contract-template">
                    <div class="contract-template-title">
                        <h3>
                            <i class="el-icon-picture"></i>
                            常用合同模板
                        </h3>
                    </div>
                </div>
                <div class="lately-contract-list">
                    <div class="contract-list-title">
                        <h3>
                            <i class="el-icon-picture"></i>
                            最近合同列表
                        </h3>
                        <div class="list-btn-box">
                            <el-radio-group v-model="radio1" @change="showList">
                                <el-radio-button class="list-btn" label="全部"></el-radio-button>
                                <el-radio-button class="list-btn" label="待签署"></el-radio-button>
                                <el-radio-button class="list-btn" label="已签署"></el-radio-button>
                                <el-radio-button class="list-btn" label="已作废"></el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                    <div class="contract-table">
                        <el-table
                            :data="tableData"
                            style="width: 100%">
                            <el-table-column
                                prop="orderNumber"
                                label="订单号"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="channel"
                                label="渠道"
                                width="140">
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="姓名">
                            </el-table-column>
                            <el-table-column
                                prop="createTime"
                                label="创建时间"
                                width="140"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="signStatus"
                                label="签署状态">
                            </el-table-column>
                            <el-table-column
                                prop="actions"
                                label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        type="primary"
                                        plain
                                        @click="handleEdit(scope.$index, scope.row)">
                                        查看
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            radio1: '全部',
            tableData: [{
                orderNumber: '120551315654312525',
                signStatus: '待签署',
                createTime: '2016-05-02 09:00:00',
                name: '王小虎',
                channel: '上海市普陀区金沙江路',
            }, {
                orderNumber: '120551315654311525',
                signStatus: '已签署',
                createTime: '2016-05-04 10:00:00',
                name: '王小虎',
                channel: '上海市普陀区金沙江路',
            }, {
                orderNumber: '120551315154311525',
                signStatus: '已作废',
                createTime: '2016-05-01 08:00:00',
                name: '王小虎',
                channel: '上海市普陀区金沙江路',
            }, {
                orderNumber: '120551315124311525',
                signStatus: '已作废',
                createTime: '2016-05-03 12:00:00',
                name: '王小虎',
                channel: '上海市普陀区金沙江路',
            }],
        };
    },
    methods: {
        upLoad() {
            this.$router.push('/createSign');
        },
        handleEdit(index, row) {
            window.console.log(index, row);
        },
        showList() {
            if (this.radio1 === '待签署') {
                const newdata = JSON.parse(window.sessionStorage.getItem('listData'));
                this.tableData = newdata.filter((item) => {
                    if (item.signStatus === '待签署') {
                        return item;
                    }
                });
            } else if (this.radio1 === '已签署') {
                const newdata = JSON.parse(window.sessionStorage.getItem('listData'));
                this.tableData = newdata.filter((item) => {
                    if (item.signStatus === '已签署') {
                        return item;
                    }
                });
            } else if (this.radio1 === '已作废') {
                const newdata = JSON.parse(window.sessionStorage.getItem('listData'));
                this.tableData = newdata.filter((item) => {
                    if (item.signStatus === '已作废') {
                        return item;
                    }
                });
            } else if (this.radio1 === '全部') {
                const newdata = JSON.parse(window.sessionStorage.getItem('listData'));
                this.tableData = newdata;
            }
        },
    },
    created() {
        window.sessionStorage.setItem('listData', JSON.stringify(this.tableData));
    },
    
};
</script>

<style scoped>
.home{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
}

.home-main-top{
    width: 100%;
    height: 339px;
    display: flex;
    margin-bottom: 20px;
}

.new-sign{
    width: 371px;
    height: 339px;
    background: #fff;
    border-radius: 10px;
}

.wait-sign{
    flex: 1;
    height: 339px;
    background: #fff;
    border-radius: 10px;
    margin: 0 19px;
}

.already-sign{
    flex: 1;
    height: 339px;
    background: #fff;
    border-radius: 10px;
}

.new-sign-title, .wait-sign-title, .already-sign-title{
    padding: 0 20px;
    height: 60px;
}

.home-main-top h3{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    border-bottom: 1px solid rgba(229, 229, 234, 1);
}

.upload-btn{
    width: 106px;
    height: 32px;
    font-size: 14px;
    text-align: center;
    padding: 0;
    display: block;
    margin: 0 auto;
    margin-top: 45px;
    margin-bottom: 9px;
}

.new-sign-main{
    text-align: center;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
}

.home-main-top .sign-num{
    height: 130px;
    width: 130px;
    text-align: center;
    line-height: 130px;
    color: rgba(16, 16, 16, 1);
    font-size: 20px;
    margin: 0 auto;
    margin-top: 44px;
    border: 1px solid rgba(187, 187, 187, 1);
    border-radius: 50%;
}

.list-btn{
    margin: 0 15px;
    width: 88px;
    height: 35px;
    border-radius: 2px;
    font-size: 14px;
}

.list-btn >>> .el-radio-button__inner{
    width: 88px;
    height: 35px;
    border-radius: 2px;
    padding: 0;
    line-height: 35px;
    font-size: 14px;
    border-left: 1px solid #dcdfe6;
    box-shadow: none;
}

.home-main-bottom{
    display: flex;
    width: 100%;
    height: 518px;
}

.contract-template{
    background: #fff;
    width: 370px;
    height: 518px;
    margin-right: 19px;
    border-radius: 10px;
}

.lately-contract-list{
    background: #fff;
    flex: 1;
    width: 775px;
    border-radius: 10px;
}

.contract-template-title{
    padding: 0 20px;
    height: 60px;
}

.contract-template-title h3{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    border-bottom: 1px solid rgba(229, 229, 234, 1);
}

.contract-list-title{
    margin: 0 20px;
    height: 60px;
    border-bottom: 1px solid rgba(229, 229, 234, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contract-list-title h3{
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

.contract-table{
    padding: 0 30px;
    padding-top: 16px;
}

.contract-table >>> .el-table__header-wrapper{
    height: 38px;
    background-color: rgba(250, 250, 250, 1);
    border: 1px dashed rgba(187, 187, 187, 1);
    box-sizing: border-box;
}

.contract-table >>> .el-table thead{
    font-size: 12px;
    color: rgba(16, 16, 16, 1);
    font-weight: bold;
}

.contract-table >>> .el-table thead th{
    height: 100%;
    padding: 0;
    background-color: rgba(250, 250, 250, 1);
    border: 0;
    line-height: 38px;
}

.contract-table >>> .el-table td{
    padding: 17px 0;
    font-size: 10px;
    color: rgba(16, 16, 16, 1);
}

.new-sign-right{
    display: flex;
    flex: 1;
}
</style>
